<template>
    <div>
      <el-form :inline="true" :model="searchForm" size="mini">
        <div class="common-btn">
          <el-button size="mini" type="primary" @click="getExcel">导出excel</el-button>
        </div>
        <div class="search-common">
          <el-row :gutter="10">
            <el-col :sm="8" :xs="24" >
              <div class="grid-content bg-purple">
                <el-form-item label="支付渠道" label-width="70px">
                  <el-select  placeholder="" v-model="searchForm.paymentChannel" style="width:180px">
                    <el-option label="全部"  value=""></el-option>
                    <el-option label="支付宝" value="1"></el-option>
                    <el-option label="微信" value="2"></el-option>
                    <el-option label="苹果支付" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" >
              <div class="grid-content bg-purple-light">
                <el-form-item label="来源" label-width="70px">
                  <el-select placeholder="来源" v-model="searchForm.source" style="width:180px">
                    <el-option label="全部"  value=""></el-option>
                    <el-option label="PC" value="1"></el-option>
                    <el-option label="Android" value="2"></el-option>
                    <el-option label="IOS" value="3"></el-option>
                    <el-option label="WEB" value="4"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :sm="8" :xs="24" >
              <el-form-item label="交易状态" label-width="70px">
                <el-select placeholder="交易状态" v-model="searchForm.dealStatus" style="width:180px">
                  <el-option label="全部"  value=""></el-option>
                  <el-option label="待支付" value="0"></el-option>
                  <el-option label="支付成功" value="1"></el-option>
                  <el-option label="支付失败" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :sm="8" :xs="24">
              <el-form-item label="交易金额" label-width="70px">
                <el-input-number v-model="searchForm.beginMoney" controls-position="right"  style="width:100px"    :min="0" :max="9999999"></el-input-number>
                至 <el-input-number   v-model="searchForm.endMoney" controls-position="right" style="width:100px"   :min="1" :max="9999999"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :sm="8" :xs="24" >
              <el-form-item>
                <el-input placeholder="请输入内容" v-model="searchForm.usersTypeCount" class="input-with-select">
                  <el-select v-model="searchForm.usersType" style="width: 120px;" slot="prepend" placeholder="请选择">
                    <el-option label="用户手机" value="account"></el-option>
                    <el-option label="用户ID" value="id"></el-option>
                    <el-option label="用户昵称" value="nickname"></el-option>
                  </el-select>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :sm="24" :xs="24">
              <el-form-item label="到账时间" label-width="70px">
                <el-date-picker
                  v-model="searchForm.moneyTime"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :sm="24" :xs="24" >
              <el-form-item>
                <el-button type="primary" @click="submitForm">查询</el-button>
                <el-button type="info" @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              searchForm:{
                paymentChannel:'',
                source:'',
                dealStatus:'',
                usersType:'account',
                usersTypeCount:'',
                beginMoney:'',
                endMoney:1000,
                moneyTime:[],
                startDate:'',
                endDate:''
              },
            };
        },
        mounted() {

        },
        methods: {
          submitForm(){
            //与父组件通信传值
            if(this.searchForm.moneyTime === null){
              this.searchForm.startDate = '';
              this.searchForm.endDate = '';
            }else {
              this.searchForm.startDate = this.searchForm.moneyTime[0];
              this.searchForm.endDate = this.searchForm.moneyTime[1];
            }
            this.$emit('searchParams', this.searchForm);
            //console.log(JSON.stringify(this.searchForm,'--------'));
          },
          //导出excel
          getExcel(){
            alert('下载');
          },
          resetForm() {
            this.searchForm.paymentChannel='';
            this.searchForm.source='';
            this.searchForm.dealStatus='';
            this.searchForm.usersType='account';
            this.searchForm.usersTypeCount='';
            this.searchForm.beginMoney='';
            this.searchForm.endMoney=1000;
            this.searchForm.moneyTime='';
          }
        }
    };
</script>
<style scoped></style>
